﻿
<style type="text/css">
    body {
        margin-bottom: 60px !important;
    }

  a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}

    ul, li {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #plug-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 800;
    }

    .top_bar {
        position: fixed;
        bottom: 0;
        right: 0px;
        z-index: 900;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        font-family: Helvetica, Tahoma, Arial, Microsoft YaHei, sans-serif;
    }

    .plug-menu {
        -webkit-appearance: button;
        display: inline-block;
        width: 36px;
        height: 36px;
        border-radius: 36px;
        position: absolute;
        bottom: 17px;
        right: 17px;
        z-index: 999;
        box-shadow: 0 0 0 4px #FFFFFF, 0 2px 5px 4px rgba(0, 0, 0, 0.25);
        background-color: #B70000;
        -webkit-transition: -webkit-transform 200ms;
        -webkit-transform: rotate(1deg);
        color: #fff;
        background-image: url(/templatesstore/images/shizijia.png);
        background-repeat: no-repeat;
        -webkit-background-size: 80% auto;
        background-size: 80% auto;
        background-position: center center;
    }

        .plug-menu:before {
            font-size: 20px;
            margin: 9px 0 0 9px;
        }

        .plug-menu:checked {
            -webkit-transform: rotate(135deg);
        }

    .top_menu > li {
        width: 32px;
        height: 32px;
        border-radius: 32px;
        box-shadow: 0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25);
        background: #B70000;
        position: absolute;
        bottom: 0;
        right: 0;
        margin-bottom: 20px;
        margin-right: 20px;
        z-index: 900;
        -webkit-transition: -webkit-transform 200ms;
    }

        .top_menu > li a {
            color: #fff;
            font-size: 20px;
            display: block;
            height: 100%;
            line-height: 33px;
            text-align: center;
        }

        .top_menu > li > a label {
            display: none;
        }

        .top_menu > li a img {
            display: block;
            width: 22px;
            height: 22px;
            text-indent: -999px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -11px;
            margin-left: -11px;
        }

        .top_menu>li.on:nth-of-type(1) {
            -webkit-transform: translate(-0, -100px) rotate(720deg);
        }

        .top_menu>li.on:nth-of-type(2) {
            -webkit-transform: translate(-47px, -81px) rotate(720deg);
        }

        .top_menu>li.on:nth-of-type(3) {
            -webkit-transform: translate(-81px, -45px) rotate(720deg);
        }

        .top_menu>li.on:nth-of-type(4) {
            -webkit-transform: translate(-100px, 0) rotate(720deg);
        }

    #sharemcover {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        z-index: 20000;
    }

        #sharemcover img {
            position: fixed;
            right: 18px;
            top: 5px;
            width: 260px;
            height: 180px;
            z-index: 20001;
            border: 0;
        }
</style>
<div id="sharemcover" onclick="document.getElementById('sharemcover').style.display='';" style="display: none">
    <img src="/templatesstore/images/MgnnofmleM.png">
</div>
<div class="top_bar" style="-webkit-transform: translate3d(0,0,0)">
    <nav>
        <ul id="top_menu" class="top_menu">
            <input type="checkbox" id="plug-btn" class="plug-menu themeStyle">

              <vt:function var="bottom" method="getBottomMenu" type="$this" classlayer="1" />
            <vt:foreach from="$bottom" item="b" index="floor">
            <li class="themeStyle out"><a href="{$b.link_url}">
                <img src="{$b.ico_url}"><label>{$b.title}</label></a></li>

                 </vt:foreach>
        </ul>
    </nav>
</div>
<div id="plug-wrap" style="display:none;"></div>
<script>
    window.addEventListener("DOMContentLoaded", function () {
        btn = document.getElementById("plug-btn");
        btn.onclick = function () {
            var divs = document.getElementById("top_menu").querySelectorAll("li");
            var className = className = this.checked ? "themeStyle on" : "themeStyle out";
            for (i = 0; i < divs.length; i++) {
                divs[i].className = className;
            }
            document.getElementById("plug-wrap").style.display = "themeStyle on" == className ? "" : "none";
        }

        btn2 = document.getElementById("plug-wrap");
        btn2.onclick = function () {
            btn.click();
        }
    }, false);
</script>
